<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css-选择器</title>
    <!-- <link rel="stylesheet" href="03-css-选择器.css"> -->
    <!-- 选择优先级，通用：越精细优先级越高，越广泛优 先级越低 -->
    <style>
        /* 1.标签选择器 */
        p {
            color: red;
        }

        h3 {
            color: yellow;
        }

        /* 2.类选择器 */
        .red {
            color: red;
        }

        .myclass {
            color: skyblue;
        }

        /* 3.id选择器，编码规范：一个页面id唯一，不可重复。 */
        #blue {
            color: blue;
        }

        /* 4.通配符选择器 */
        * {
            color: red;
        }

        /* 5.复合选择器 */
        p.red {
            color: red;
            font-size: 40px;
        }

        /* 父标签下的直接子标签 */
        /* 子标签选择器 父标签>子标签 */
        div>p {
            color: red;
        }

        div>.red {
            color: red;
        }

        /* 后代选择器 父标签 子标签 */
        p span {
            color: burlywood;
        }

        /* 6.伪类选择器 */
        /* 鼠标悬停 */
        p:hover {
            color: red;
        }

        /* 鼠标点击 */
        p:active {
            color: red;
        }

        /* 鼠标点击后 */
        p:visited {
            color: red;
        }

        /* 鼠标悬停前 */
        p:link {
            color: red;
        }

        /* 鼠标点击后 */
        p:target {
            color: red;
        }

        /* 语言选择器 */
        p:lang(zh) {
            color: red;
        }
    </style>
</head>



<body>
    <h3>标签选择器</h3>
    <div id="blue">我是id选择器</div>
    <div class="myclass">我是class选择器</div>
    <p class="myclass">我是class选择器2</p>
    <p class="myclass">我是class选择器3</p>

    <div>
        <p class="myclass">我是div p</p>
        <p class="red">我是div p</p>
    </div>

    <div>
        <p class="myclass">我是div p
            <span>我是div p span </span>
        </p>
        <p class="red">我是div p</p>

    </div>

</body>

</html>